@import'common';

header{
    width: 100%;
    height: 48px;
    background: #8E488E;
    color: white;
    line-height: 48px;
    text-align: center;
    .back{
        font-size: 20px;
    }
    .title{
        font-size: 16px;
    }
    .classifyMenu{
        position: absolute;
        left: -120px;
        background: rgba(80,90,101,0.9);
        a{
            color: white; 
        }
    }
    .btn{
        background: #8E488E;
        color: white;
        border: none;
    }
    a{
        color: white;
    }
    a:hover{
        color: white;
    }
    .details{
        background: white;
        color: #000000;
        font-size: 16px;
    }
    .comment{
        font-size: 16px;
    }
}

#centerContainerDetails{
    width: 100%;
    position: absolute;
    top: 48px;
    bottom: 51px;
    overflow-x: hidden;
    overflow-y: auto;
    background: rgb(241,245,246);
    .carouselBox{
        width: 100%;
        background: #FFFFFF;
        text-align: center;
        p{
          text-align: left;
          padding-left: 5px;
          margin-bottom: 0px;  
        }
    }
    .info{
        width: 100%;
        padding: 2%;
        background: #FFFFFF;
        margin-top: 5px;
        p{
            font-size: 12px;
        }
    }
    .longPic{
        width: 100%;
        img{
            width: 100%;
        }
    }
    .commentBox{
        width: 100%;
        background: #FFFFFF;
        padding-bottom: 5px;
        .boxTop{
            width: 100%;
            height: 38px;
            line-height: 38px;
            border-bottom: 1px solid #CCCCCC;
            margin-top: 7px;
            img{
                width: 20px;
                height: 20px;
            }
            .time{
                float: right;
                margin-right: 5px;
            }           
        }
        p{
            margin-bottom: 2px;
            font-size: 12px;
            padding-left: 5px;
            .fa{
              color: red;  
            }
        }
    }    
}

#centerContainerComment{
    width: 100%;
    position: absolute;
    top: 48px;
    bottom: 51px;
    overflow-x: hidden;
    overflow-y: auto;
    background: rgb(241,245,246);
    display: none;
    .commentBox{
        width: 100%;
        background: #FFFFFF;
        padding-bottom: 5px;
        .boxTop{
            width: 100%;
            height: 38px;
            line-height: 38px;
            border-bottom: 1px solid #CCCCCC;
            margin-top: 7px;
            img{
                width: 20px;
                height: 20px;
            }
            .time{
                float: right;
                margin-right: 5px;
            }           
        }
        p{
            margin-bottom: 2px;
            font-size: 12px;
            padding-left: 5px;
            .fa{
              color: red;  
            }
        }
    }
}

footer{
    width: 100%;
    height: 51px;
    position: absolute;
    bottom: 0px;
    border-top: 1px solid #CCCCCC;
    text-align: center;
    a{
        color: #000000;
    }
    .shppingCar{
        background: rgb(241,245,246);
        position: relative;
        height: 50px;
        .fa{
            font-size: 33px;
        }
        .car{
            position: absolute;
            top: 10px;
            left: 10px;
        }
        .number{
            width: 15px;
            height: 15px;
            border-radius: 30%;
            background: skyblue;
            display: inline-block;
            position: absolute;
            top: 10px;
            right: 10px;
            color: white;
        }
    }
    .joinCar{
        background: rgb(221,61,151);
        height: 50px;
        line-height: 50px;
        color: white;
    }
    .buyNow{
        background: rgb(142,72,142);
        height: 50px;
        line-height: 50px;
        color: white;
    }
}
